<!-- 工作班次管理 -->

<template>
    <div>
        <h1>这是班次管理</h1>
        <div style="text-align: right;">
            <el-button type="primary" @click="changeIsShowAddOrEditWorkshiftItemDialog('add')">新增班次</el-button>
        </div>
        <el-divider>班次管理</el-divider>

        <el-table :data="workShiftItemAll" style="margin: auto;">
            <el-table-column prop="itemId" label="ID"></el-table-column>
            <el-table-column prop="itemName" label="昵称"></el-table-column>
            <el-table-column prop="itemStartTime" label="开始时间"></el-table-column>
            <el-table-column prop="itemEndTime" label="结束时间"></el-table-column>
            <el-table-column label="班次编辑">
                <template slot-scope="scope">
                    <el-button size="mini" @click="changeIsShowAddOrEditWorkshiftItemDialog('edit', scope.row.itemId)">
                        班次编辑
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column label="删除班次">
                <template slot-scope="scope">
                    <el-button size="mini" type="danger"
                               @click="changeIsShowAddOrEditWorkshiftItemDialog('delete',scope.row.itemId)">
                        删除班次
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog :visible="workshiftItemDialog.isShow" :title="workshiftItemDialog.title"
                   :before-close="closeIsShowAddOrEditWorkshiftItemDialog">
            <template v-if="workshiftItemDialog.action === 'delete'">
                <h1>
                    是否确认删除
                </h1>
                <div>
                    <el-button type="danger" @click="deleteWorkShiftItem">确认</el-button>
                    <el-button @click="closeIsShowAddOrEditWorkshiftItemDialog">取消</el-button>
                </div>
            </template>
            <template v-else>
                <div style="width: 80%;margin: auto;">
                    <el-form label-width="100px" label-position="right" :model="workshiftItemDialog.form">
                        <el-form-item label="班次昵称">
                            <el-input v-model="workshiftItemDialog.form.itemName" style="width: 300px;"></el-input>
                        </el-form-item>
                        <el-form-item label="班次时间">
                            <el-time-picker v-model="workshiftItemDialog.form.itemTime" is-range range-separator="至"
                                            start-placeholder="开始时间" end-placeholder="结束时间" style="width: 300px;">
                            </el-time-picker>
                        </el-form-item>
                        <div>
                            <el-button type="danger" @click="editWorkShiftItem">确认</el-button>
                            <el-button @click="closeIsShowAddOrEditWorkshiftItemDialog">取消</el-button>
                        </div>
                    </el-form>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script>
    import axios from "axios"
    import qs from "qs"

    export default {
        name: "workShiftManager",
        data: function () {
            return {
                workShiftItemAll: [{
                    itemId: "1",
                    itemName: "name",
                    itemStartTime: "7",
                    itemEndTime: "5"
                },],
                isShowAddOrEditWorkshiftItemDialog: false,
                workshiftItemDialog: {
                    isShow: false,
                    action: "edit",
                    title: "编辑班次",
                    itemId: null,
                    form: {
                        itemName: "",
                        itemTime: [new Date(), new Date()],
                    }
                }
            }
        },
        props: {},
        methods: {
            /**
             * @description 改变是否显示数据增加或者更新的窗口
             */
            changeIsShowAddOrEditWorkshiftItemDialog: function (action, itemId) {
                this.workshiftItemDialog.action = action;
                this.workshiftItemDialog.isShow = true;
                this.workshiftItemDialog.itemId = itemId;
                // this.workshiftItemDialog.title = action === "edit" ? "编辑班次" : "新增班次"
                switch (action) {
                    case "add":
                        this.workshiftItemDialog.title = "新增班次";
                        this.workshiftItemDialog.form.itemName = "";
                        this.workshiftItemDialog.form.itemTime = [new Date(), new Date()];
                        break;
                    case "edit":
                        this.workshiftItemDialog.title = "编辑班次";
                        for (var i = 0; i < this.workShiftItemAll.length; ++i) {
                            if (this.workShiftItemAll[i].itemId === this.workshiftItemDialog.itemId) {
                                this.workshiftItemDialog.form.itemName = this.workShiftItemAll[i].itemName;
                                this.workshiftItemDialog.form.itemTime = this.str2Date2(this.workShiftItemAll[i].itemStartTime, this.workShiftItemAll[i].itemEndTime);
                                break;
                            }
                        }
                        break;
                    case "delete":
                        this.workshiftItemDialog.title = "删除班次";
                        break;
                }
            },

            /**
             * @description 关闭数据增加或者更新窗口
             */
            closeIsShowAddOrEditWorkshiftItemDialog: function () {
                this.workshiftItemDialog.isShow = false;
            },

            /**
             * @description 将更新后的数据提交给后端处理
             */
            editWorkShiftItem: function () {
                var _this = this;
                var startTime = _this.workshiftItemDialog.form.itemTime[0];
                if (startTime.getMinutes() < 10) {
                    startTime = startTime.getHours() + ":0" + startTime.getMinutes();
                } else {
                    startTime = startTime.getHours() + ":" + startTime.getMinutes();
                }


                var endTime = _this.workshiftItemDialog.form.itemTime[1];
                if (endTime.getMinutes() < 10) {
                    endTime = endTime.getHours() + ":0" + endTime.getMinutes();
                } else {
                    endTime = endTime.getHours() + ":" + endTime.getMinutes();
                }


                axios
                    .post("http://127.0.0.1:8000/api/WorkShiftItem/", qs.stringify({
                        action: "edit",
                        itemId: _this.workshiftItemDialog.itemId,
                        item: {
                            name: _this.workshiftItemDialog.form.itemName,
                            start_time: startTime,
                            end_time: endTime,
                        }
                    }))
                    .then(function (response) {
                        _this.$message({
                            message: "恭喜，操作成功！",
                            type: "success"
                        })
                        console.log("执行成功");
                        _this.getWorkShiftItemAll();
                        _this.closeIsShowAddOrEditWorkshiftItemDialog();
                    })
                    .catch(function (error) {
                        _this.$message({
                            message: "抱歉，操作失败！",
                            type: "danger"
                        })
                        console.log(error)
                    })
            },

            /**
             * @description 将新增后的数据提交给后端处理
             */
            addWorkShiftItem: function () {
                var _this = this;
                var startTime = _this.workshiftItemDialog.form.itemTime[0];
                startTime = startTime.getHours() + "-" + startTime.getMinutes();
                var endTime = _this.workshiftItemDialog.form.itemTime[1];
                endTime = endTime.getHours() + "-" + endTime.getMinutes();
                axios
                    .post("http://127.0.0.1:8000/api/WorkShiftItem/", qs.stringify({
                        action: "add",
                        item: {
                            name: _this.workshiftItemDialog.form.itemName,
                            start_time: startTime,
                            end_time: endTime,
                        }
                    }))
                    .then(function (response) {
                        _this.$message({
                            message: "恭喜，操作成功！",
                            type: "success"
                        })
                        console.log("执行成功");
                        _this.getWorkShiftItemAll();
                        _this.closeIsShowAddOrEditWorkshiftItemDialog();
                    })
                    .catch(function (error) {
                        _this.$message({
                            message: "抱歉，操作失败！",
                            type: "danger"
                        })
                        console.log(error)
                    })
            },

            /**
             * @description 执行删除班次操作请求
             */
            deleteWorkShiftItem: function () {
                console.log("delete: " + this.workshiftItemDialog.itemId);
                var _this = this;
                axios
                    .post("http://127.0.0.1:8000/api/WorkShiftItem/", qs.stringify({
                        action: "delete",
                        itemId: _this.workshiftItemDialog.itemId
                    }))
                    .then(function (response) {
                        _this.$message({
                            message: "恭喜，操作成功！",
                            type: "success"
                        })
                        console.log("执行成功");
                        _this.getWorkShiftItemAll();
                        _this.closeIsShowAddOrEditWorkshiftItemDialog();
                    })
                    .catch(function (error) {
                        _this.$message({
                            message: "抱歉，操作失败！",
                            type: "danger"
                        })
                        console.log(error)
                    })
            },

            /**
             * @description 获取所有的班次，并赋值到workShiftItemAll中
             */
            getWorkShiftItemAll: function () {
                var _this = this;
                axios
                    .get("http://127.0.0.1:8000/api/WorkShiftItem/")
                    .then(function (response) {
                        _this.workShiftItemAll.length = 0;
                        response.data.data.forEach(function (item, index) {
                            _this.workShiftItemAll.push({
                                itemId: item.id,
                                itemName: item.name,
                                itemStartTime: item.start_time,
                                itemEndTime: item.end_time
                            })
                        })
                    })
                    .catch(function (error) {
                        console.log(error)
                    })
            },

            /**
             * @description 用来更改数据展示的格式
             */
            timeShowformatter: function (timeShow) {
                timeShow = timeShow.split("-");
                return timeShow[0] + ":" + timeShow[1];
                // return timeShow.replace(/-/, ":");
            },

            /**
             * @description 这个函数可以用来将字符串格式时间转化为Date格式的时间
             */
            str2Date: function (times) {
                times = times.split(":");
                var startTime = new Date()
                startTime.setHours(Number(times[0]));
                startTime.setMinutes(Number(times[1]));
                return startTime;
            },

            /**
             * @description 此函数专用于本页面，可以用来进行两个字符串格式时间转化为Date格式的时间
             *              并且，返回一个列表
             */
            str2Date2: function (times1, time2) {
                return [this.str2Date(times1), this.str2Date(time2)];
            }
        },
        mounted: function () {
            this.getWorkShiftItemAll();
        },
        components: {}
    }
</script>

<style>

</style>
